<template>
  <div>
    <p :style="{ color: color }">vue3--Demo(使用setup函数)--组件provide&inject--GrandSon组件</p>
    <p
      >GrandSon组件--数据信息：dataFlag:{{ dataFlag }} color:{{ color }} fixModelData:{{
        fixModelData
      }}
      timeFlagData:{{ timeFlagData }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="injectMethod">点击调用根组件的弹出提示信息</a-button>
    </a-space>
    <Demo32GrandSon1 />
  </div>
</template>
<script setup lang="ts">
  import { inject } from 'vue';
  import Demo32GrandSon1 from './Demo32GrandSon1.vue';

  console.log('vue3--Demo(使用setup语法糖)--组件provide&inject--Son组件--setup 语法糖 执行了。');

  //注入接收上级传入的数据并在return中导出
  const color = inject<String>('color', 'black');
  const dataFlag = inject('dataFlag', true); //指定默认值为true，不指定默认值时如果父组件中未传入会有警告
  const fixModelData = inject('data1');
  const timeFlagData = inject('data2');
  const injectMethod = inject('testProvideMethod');
</script>
<style scoped></style>
